<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    header {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
    }

    nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 10px 0;
    }

    nav a {
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      font-weight: bold;
    }

    nav a:hover {
      background-color: #555;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
    }

    .section {
      flex: 1 1 30%;
      margin: 15px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .section h3 {
      background-color: #333;
      color: white;
      padding: 15px;
      margin: 0;
    }

    .section-content {
      padding: 15px;
    }

    .section ul {
      list-style: none;
      padding: 0;
    }

    .section ul li {
      background-color: #f9f9f9;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .user-profile {
      background-color: #333;
      color: white;
      padding: 20px;
      width: 100%;
      border-radius: 8px;
      text-align: center;
    }

    .user-profile img {
      border-radius: 50%;
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }

    .user-profile h2 {
      margin: 10px 0;
    }

    .user-profile p {
      font-size: 14px;
      color: #ddd;
    }
  </style>
</head>
<body>

<!-- Header Section -->
<header>
  <h1>分类页面</h1>
  <p>欢迎来到我们的分类页面！在这里，你可以浏览各种分类的内容。</p>
</header>

<!-- Navigation Menu -->
<nav>
  <a href="#art">美术</a>
  <a href="#learning">学习</a>
  <a href="#recommend">推荐</a>
  <a href="#popular">热门</a>
  <a href="#followed">关注</a>
  <a href="#user">用户</a>
</nav>

<!-- Main Content Container -->
<div class="container">
  <!-- 美术分类 -->
  <div id="art" class="section">
    <h3>美术</h3>
    <div class="section-content">
      <ul>
        <li>油画基础教程</li>
        <li>水彩画入门</li>
        <li>现代艺术探索</li>
        <li>数字艺术教程</li>
      </ul>
    </div>
  </div>

  <!-- 学习分类 -->
  <div id="learning" class="section">
    <h3>学习</h3>
    <div class="section-content">
      <ul>
        <li>编程入门</li>
        <li>数学学习技巧</li>
        <li>英语口语训练</li>
        <li>科学实验教程</li>
      </ul>
    </div>
  </div>

  <!-- 推荐分类 -->
  <div id="recommend" class="section">
    <h3>推荐</h3>
    <div class="section-content">
      <ul>
        <li>提升效率的工具</li>
        <li>生活方式改变建议</li>
        <li>必读书单</li>
        <li>有趣的纪录片</li>
      </ul>
    </div>
  </div>

  <!-- 热门分类 -->
  <div id="popular" class="section">
    <h3>热门</h3>
    <div class="section-content">
      <ul>
        <li>世界顶级博物馆</li>
        <li>AI科技发展趋势</li>
        <li>如何做好时间管理</li>
        <li>旅行的最佳目的地</li>
      </ul>
    </div>
  </div>

  <!-- 关注分类 -->
  <div id="followed" class="section">
    <h3>关注</h3>
    <div class="section-content">
      <ul>
        <li>健康与养生</li>
        <li>创业与投资</li>
        <li>创意写作</li>
        <li>环保与可持续发展</li>
      </ul>
    </div>
  </div>

  <!-- 用户信息 -->
  <div id="user" class="section">
    <h3>用户</h3>
    <div class="user-profile">
      <img src="https://via.placeholder.com/100" alt="用户头像">
      <h2>张三</h2>
      <p>欢迎回来！这是你的个人空间。</p>
      <p><strong>关注的分类：</strong>美术, 学习, 推荐</p>
      <p><a href="#">编辑个人资料</a></p>
    </div>
  </div>
</div>

</body>
</html>
